<template>
    <div class="mainbox">
        <div id="main" style="width: 600px;height: 400px;"></div>
        <div id="main1" style="width: 600px;height: 400px;"></div>
    </div>
    <el-table :data="state.allData" style="width: 100%" height="250">
        <el-table-column prop="key" />
        <el-table-column prop="description" />
        <el-table-column prop="value" />
    </el-table>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue';
import { ECharts, EChartsOption, init } from 'echarts';
import { getAllRedisApi } from "../../apis/redis";
import * as echarts from 'echarts';
import { getKeysSizeApi, getMemoryInfoApi } from '../../apis/redis'
const state = reactive({
    allData: [] as any
})
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

async function getAll() {
    const res = await getAllRedisApi();
    console.log(res);
    state.allData = res.data

}
var date = [] as any;
var date1 = [] as any;
var date2 = [] as any;
var date3 = [] as any;

async function getKeysSize() {
    const res = await getKeysSizeApi()
    console.log(res);
    date2.push(res.dbSize)
    date3.push(res.create_time)
    if (date2.length > 8) {
        date2.shift();
    }
    if (date3.length > 8) {
        date3.shift();
    }

}
async function getMemory() {
    const res = await getMemoryInfoApi()
    console.log(res);
    date1.push(res.used_memory)
    date.push(res.create_time)
    if (date1.length > 8) {
        date1.shift();
    }
    if (date.length > 8) {
        date.shift();
    }

}
var timer: any
function goChart() {
    type EChartsOption = echarts.EChartsOption

    var chartDom = document.getElementById('main')!;
    var chartDom1 = document.getElementById('main1')!;
    var myChart = echarts.init(chartDom);
    var myChart1 = echarts.init(chartDom1);
    var option: EChartsOption;
    var option1: EChartsOption;

    option = {
        title: {
            text: "内存实时占用情况"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
        },
        yAxis: {
            type: 'value',
            scale: true,
            splitNumber: 5,
            boundaryGap: [0.5, 0.5]
        },
        series: [
            {
                data: date1,
                type: 'line',
                areaStyle: {},
            }
        ]
    };
    option1 = {
        title: {
            text: "实时数量"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
        },
        yAxis: {
            type: 'value',
            scale: true,
            splitNumber: 5,
            boundaryGap: [0.5, 0.5]
        },
        series: [
            {
                data: date1,
                type: 'line',
                areaStyle: {},
            }
        ]
    };

    option && myChart.setOption(option);
    option1 && myChart1.setOption(option1);

    timer = setInterval(function () {
        getMemory()
        getKeysSize()
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [
                {
                    name: '成交',
                    data: date1
                }
            ]
        });
        myChart1.setOption({
            xAxis: {
                data: date3
            },
            series: [
                {
                    name: '成交',
                    data: date2
                }
            ]
        });
    }, 1000);
}
onMounted(() => {
    getAll()
    goChart()
})
onUnmounted(() => {
    clearInterval(timer)
})




</script>

<style scoped>
.mainbox {
    display: flex;
}
</style>